<!-- Created by henian.xu on 2018/11/19. -->

<template>
    <Panel class="goods-detail">
        <div class="row">
            <div class="col-8">
                <GoodsSlider :data="data.goodsImageList"/>
            </div>
            <div class="col-16">
                <div class="detail-inner">
                    <div class="goods-title">{{ data.goodsName }}</div>
                    <div class="goods-sub-title">{{ data.goodsShortName }}</div>

                    <div class="prop-wrap">
                        <dl>
                            <dt>货号:</dt>
                            <dd>{{ data.goodsSn }}</dd>
                        </dl>
                        <dl>
                            <dt>市场价:</dt>
                            <dd>{{ data.marketPrice }}</dd>
                        </dl>
                        <dl>
                            <dt>成交:</dt>
                            <dd>30天内 88件 成交</dd>
                        </dl>
                        <dl>
                            <dt>物流:</dt>
                            <dd>{{ data.companyRegionName }} 至 <ShipMethod
                                :sku-id="data.defaultSkuId"
                                :weight="data.defaultWeight"/></dd>
                        </dl>
                    </div>
                    <div class="prop-wrap">
                        <dl
                            v-for="(prop) in specList"
                            :key="prop.pid">
                            <dt>{{ prop.pn }}:</dt>
                            <dd>
                                <ImgList
                                    v-if="prop.isColorProp"
                                    :column="12"
                                    :data="prop.vImgData"/>
                                <template v-else>
                                    <div
                                        class="btn ma-r"
                                        v-for="(v) in prop.v"
                                        :key="v.vid">{{ v.vn }}</div>
                                </template>
                            </dd>
                        </dl>
                    </div>

                    <linker
                        to="/register/distributor"
                        ssr
                        class="btn btn-main btn-big">立即入驻分销</linker>

                </div>
            </div>
        </div>
    </Panel>
</template>

<script>
import GoodsSlider from './GoodsSlider';
export default {
    name: 'GoodsDetail',
    components: { GoodsSlider },
    data() {
        return {};
    },
    props: {
        data: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    computed: {
        specList() {
            if (!this.data.specConfigs) return [];
            return this.data.specConfigs.map(prop => {
                const vItem = prop.v[0];
                if (vItem.vimgUrl) {
                    prop.isColorProp = true;
                    prop.vImgData = prop.v.map(v => v.vimgUrl);
                } else {
                    prop.isColorProp = false;
                }
                return prop;
            });
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.goods-detail {
    .detail-inner {
        padding: 0 $padding;
        .goods-title {
            font-size: 20px;
        }
        .goods-sub-title {
            color: $color-red;
        }

        .prop-wrap {
            padding: $padding 0;
            line-height: 30px;
            + .prop-wrap {
                border-top: 1px solid $color-border;
            }
            > dl {
                position: relative;
                padding: $padding-small 0;
                @include clearfix;

                > dt {
                    float: left;
                    min-width: 5em;
                    color: $gray6;
                }
                > dd {
                    overflow: hidden;
                }
            }
        }
    }
}
</style>
